<template>
  <div>
    <div style="display: flex;justify-content: space-between;margin-top: 13px">
      <solar-cloud :status="device.status" :signal="device.signal" style="width: 150px" />
      <div style="margin: 5px">
        <div class="info-item">
          <span class="title">DTU{{ $t('hardware')+$t('version') }}:</span>
          <span class="value">{{ device.hardVersion }}</span>
        </div>
        <div class="info-item">
          <span class="title">DTU{{ $t('software')+$t('version') }}:</span>
          <span class="value">{{ device.softVersion }}</span>
        </div>
      </div>
    </div>
    <div style="display: flex;width: 80%;margin:200px auto">
      <i class="fa fa-bug svg-icon" style="font-size: 200px" />
      <dv-digital-flop :config="killCountConf" style="height:200px;width: 500px" />
    </div>
    <div style="margin: 20px 13px 13px 13px;position: fixed;bottom: 20px">
      <el-row :gutter="10">
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <div class="info-item">
            <span class="title">{{ $t('last')+$t('OFFLINE')+$t('time') }}:</span>
            <span class="value">{{ formatDate(device.lastOffLineTimer) }}</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <div class="info-item">
            <span class="title">{{ $t('last')+$t('ONLINE')+$t('time') }}:</span>
            <span class="value">{{ formatDate(device.lastOnLineTimer) }}</span>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="8" :xl="8">
          <div class="info-item">
            <span class="title">{{ $t('cardNumber') }}:</span>
            <span class="value">{{ device.phoneNumber }}</span>
          </div>
        </el-col>
        <el-col v-for="(item,index) in explainList" :key="index" :xs="12" :sm="12" :md="12" :lg="8" :xl="8" class="info-item">
          <span class="title">{{ item.name }}:</span>
          <span class="value">{{ item.value }} {{ item.unit }}</span>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import SolarCloud from '../Solar/SolarCloud'
import { formatDate } from '@/util/common'
import { listSensorWith } from '@/api/iot/iotDeviceSensorApi'
export default {
  name: 'Index',
  components: {
    SolarCloud
  },
  props: {
    device: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      killCountConf: {},
      explainList: [],
      sensorList: []
    }
  },
  watch: {
    device: {
      deep: true,
      handler(value) {
        if (value != null) {
          this.listSensorWith()
        }
      }
    }
  }, created() {
    this.listSensorWith()
  }, methods: {
    listSensorWith() {
      const that = this
      listSensorWith({
        deviceCore: this.device.deviceCore,
        withExplain: true
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          that.sensorList = data
          that.init()
        }
      })
    },
    formatDate(date) {
      return formatDate(this, date)
    },
    init() {
      const explainList = []
      this.sensorList.forEach(sensor => {
        sensor.explainList.forEach(explain => {
          if (explain.keyName === 'KTriggerNum') {
            this.killCountConf = {
              number: [parseFloat(explain.value)],
              content: '{nt}' + explain.unit,
              style: {
                fontSize: 80,
                fill: '#03c2c2'
              }
            }
            console.log(explain.value)
          } else {
            explainList.push(explain)
          }
        })
      })
      this.explainList = explainList
    }
  }
}
</script>

<style scoped>
  .info-item{
    margin-top: 13px;
    font-size: 7px;
  }
  .title{
    color: #909399;
  }
  .value{
    margin-left: 13px;
    color: #34bfa3;
  }
</style>
